/*清除元素默认的内外边距  使用css3的盒子模型（设置盒子的内外边距不会撑大盒子） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*让所有斜体 不倾斜*/
em,
i {
  font-style: normal;
}

/*去掉列表前面的小点*/
li {
  list-style: none;
}

/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
  border: 0;
  /*ie6*/
  vertical-align: middle;
}

/*让button 按钮 变成小手*/
button {
  cursor: pointer;
}

/*取消链接的下划线*/
a {
  color: #666;
  text-decoration: none;
}

a:hover {
  color: #e33333;
}

h4 {
  font-weight: 400;
}


/* 设置整个页面的背景图像 */
body {
  background: url(../images/bg.jpg) no-repeat;
  background-size: cover;
}

.box {
  display: flex;
  max-width: 1920px;
  min-width: 1024px;
  min-height: 780px;
  padding: 1.1rem 0;
  background: url(../images/logo.png) no-repeat;
  background-size: contain;
}

.box .colum {
  flex: 3;
  /* background-color: plum; */
}

.box .colum:nth-child(2) {
  flex: 4;
  margin: .4267rem .2667rem 0;
}

/* 面板样式 */
.panel {
  position: relative;
  border: .1875rem solid #f00;
  border-width: .68rem .5067rem .2667rem 1.76rem;
  border-image-source: url(../images/border.png);
  border-image-slice: 51 38 20 132;
  margin-bottom: .24rem;
}

.inner {
  position: absolute;
  top: -0.64rem;
  left: -1.4667rem;
  right: -0.1333rem;
  bottom: -0.24rem;
  padding: .16rem 0;
  /* background-color: #fff; */
  color: #fff;
}

/* 概览模块 */
.overview {
  height: 1.4667rem;
}

.overview ul {
  display: flex;
  justify-content: space-between;
}

.overview ul li h4 {
  font-size: .3467rem;
  color: #fff;
  margin: 0 0 .1067rem .064rem;
}

.overview ul li span {
  font-size: .2133rem;
  color: #4c9bfd;
  /* margin: 0 0 .1rem .06rem; */
}


/* 监控区域 */
.monitor {
  height: 6.4rem;
}

.monitor .inner {
  padding: .2667rem 0;
  display: flex;
  flex-direction: column;
}

.monitor .tabs {
  padding: 0 .2667rem;
  margin-bottom: .2rem;
  display: flex;
}

.monitor .tabs a {
  padding: 0 .24rem;
  font-size: .2667rem;
  color: #1950c4;
}

.monitor .tabs a:first-child {
  padding-left: 0;
  /* padding-right: .0267rem; */
  border-right: .0267rem solid #00f2f1;
}

.monitor a.active {
  color: #fff;
}

.monitor .content {
  flex: 1;
  /* position: relative; */
  display: none;
}

.monitor .head {
  display: flex;
  justify-content: space-between;
  /* margin-top: .0667rem; */
  padding: .1067rem .2667rem;
  line-height: 1.05;
  background: rgba(225, 225, 225, 0.1);
  font-size: .24rem;
  color: #68d8fe;
}

.monitor .marquee-view {
  position: absolute;
  top: 1.2667rem;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

.monitor .row {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: .1067rem .2667rem;
  line-height: 1.05;
  /* background: rgba(225, 225, 225, 0.1); */
  font-size: .16rem;
  color: #38639B;
}

.monitor .row .icon-dot {
  position: absolute;
  top: .1333rem;
  right: .0667rem;
  /* background: rgba(0, 0, 0, 0.1); */
  opacity: 0;
}

.monitor .row:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #68d8fe;
}

.monitor .row:hover .icon-dot {
  opacity: 1;
}

.monitor .col:first-child {
  /* width: 1rem; */
  flex: 1;
}

.monitor .col:nth-child(2) {
  /* width: 2.5rem; */
  flex: 2.5;
  text-overflow: ellipsis;
  overflow: hidden;
}

.monitor .col:nth-child(3) {
  /* width: 1rem; */
  flex: 1;
}

/*2. 动画实现 */
.marquee-view .marquee {
  animation: move 15s linear infinite;
}

@keyframes move {
  0% {}

  100% {
    transform: translateY(-50%);
  }
}

/* 鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
  animation-play-state: paused;
}


/* 点位分布 */
.point {
  height: 4rem;
}

.point h4 {
  padding: .0667rem 0 0 .1333rem;
}

.point .chart {
  width: 100%;
  display: flex;
  margin-top: .2667rem;
  height: 2.9333rem;
  /* justify-content: space-between; */
}

.point .pie {
  width: 65%;
  height: 100%;
  /* flex: 1.5; */
  margin: 0;
}

.point .data {
  width: 35%;
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .1333rem .1333rem;
  background: url(../images/rect.png);
  background-size: cover;
  box-sizing: border-box;
}

.point .data li {
  padding: .2667rem 0 0 .4rem;
}

/* .point h5 {
  margin: .2rem 0 0 .1333rem;
  font-size: .35rem;
  color: #fff;
} */

.point span {
  padding-top: .1333rem;
  font-size: .16rem;
  color: #4c9bfd;
}


/* 地图  */
.map {
  height: 7.225rem;
  margin-bottom: 0.25rem;
  display: flex;
  flex-direction: column;
}

.map h3 {
  line-height: 1;
  padding: 0.2rem 0;
  margin: 0;
  font-size: 0.25rem;
  color: #fff;
  font-weight: 400;
}

.map .icon-cube {
  color: #68d8fe;
}

.map .chart {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.05);
}

.map .geo {
  width: 100%;
  height: 100%;
}


/* 用户总量统计 */
/* 用户模块 */
.users {
  height: 4.5067rem;
  display: flex;
  margin-bottom: 0;
}

.users .chart {
  display: flex;
  /* padding-top: .2667rem; */
  margin-top: .1333rem;
}

.users .bar {
  width: 7.35rem;
  height: 3.4rem;
  /* margin-top: .2667rem; */
}

.users .data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2.1rem;
  padding: .45rem .375rem;
  box-sizing: border-box;
  background-image: url(../images/rect.png);
  background-size: cover;
}

.users h4 {
  margin-bottom: .2rem;
  /* font-size: .32rem; */
  color: #fff;
}

.users span {
  display: block;
  margin-bottom: .2rem;
  color: #4c9bfd;
  font-size: 0.2rem;
}


/* 订单区域 */
.order {
  height: 1.875rem;
}

.order .filter {
  display: flex;
}

.order .filter a {
  display: block;
  height: 0.225rem;
  line-height: 1;
  padding: 0 0.225rem;
  color: #1950c4;
  font-size: 0.225rem;
  border-right: 0.025rem solid #00f2f1;
}

.order .filter a:first-child {
  padding-left: 0;
}

.order .filter a:last-child {
  border-right: none;
}

.order .filter a.active {
  color: #fff;
  font-size: 0.25rem;
}

.order .data {
  display: flex;
  margin-top: 0.25rem;
}

.order .item {
  width: 50%;
}

.order h4 {
  font-size: 0.35rem;
  color: #fff;
  margin-bottom: 0.125rem;
}

.order span {
  display: block;
  color: #4c9bfd;
  font-size: 0.2rem;
}


/* 销售区域 */
.sales {
  height: 3.1rem;
}

.sales .caption {
  display: flex;
  line-height: 1;
}

.sales h5 {
  height: 0.225rem;
  padding-right: 0.225rem;
  border-right: 0.025rem solid #00f2f1;
}

.sales a {
  padding: 0.05rem;
  font-size: 0.2rem;
  margin: -0.0375rem 0 0 0.2625rem;
  border-radius: 0.0375rem;
  color: #0bace6;
}

.sales a.active {
  background-color: #4c9bfd;
  color: #fff;
}

.sales .inner {
  display: flex;
  flex-direction: column;
}

.sales .chart {
  flex: 1;
  padding-top: 0.1875rem;
  position: relative;
}

.sales .label {
  position: absolute;
  left: 0.525rem;
  top: 0.225rem;
  color: #4996f5;
  font-size: 0.175rem;
}

.sales .line {
  width: 100%;
  height: 100%;
}


/* 渠道区块 */
.wrap {
  display: flex;
}

.channel,
.quarter {
  flex: 1;
  height: 2.9rem;
}

.channel {
  margin-right: 0.25rem;
}

.channel .data {
  overflow: hidden;
}

.channel .data .radar {
  height: 2.1333rem;
  width: 100%;
}

.channel h6 {
  color: #fff;
  /* font-size: 0.4rem; */
  margin-bottom: 0.0625rem;
}

.channel small {
  font-size: 50%;
}

.channel span {
  display: block;
  color: #4c9bfd;
  font-size: 0.175rem;
}

/* 季度区块 */
.quarter .inner {
  display: flex;
  width: 3.3333rem;
  flex-direction: column;
  margin: 0 -0.0667rem
}

.quarter .chart {
  flex: 1;
  padding-top: 0.225rem;
}

.quarter .box1 {
  position: relative;
}

.quarter .label {
  transform: translate(-50%, -30%);
  color: #fff;
  font-size: 0.375rem;
  position: absolute;
  left: 50%;
  top: 50%;
}

.quarter .label small {
  font-size: 50%;
}

.quarter .gauge {
  height: 1.05rem;
}

.quarter .data {
  display: flex;
  justify-content: space-between;
}

.quarter .item {
  width: 50%;
}

.quarter h4 {
  color: #fff;
  /* font-size: 0.3rem; */
  /* text-align: center; */
  padding-left: .0667rem;
  margin-bottom: 0.125rem;
}

.quarter .data span {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #4c9bfd;
  font-size: .08rem;
}



/*  */